<template>
	<table class="ui-table m-order-goods-cells" cellpadding="0" cellspacing="0">
		<colgroup>
			<col width="124" />
			<col width="280" />
		</colgroup>
		<tr v-for="(item, index) in goods" :key="index">
			<td>
				<div class="ui-table-cell">
					<ImageCell :src="item.thumb"></ImageCell>
				</div>
			</td>
			<td>
				<div class="ui-table-cell" style="padding-right: 40px;">
					<div class="ui-ellipsis2">{{ item.sku_name }}</div>
					<div class="ui-ellipsis ui-text-primary">店铺库存：{{ item.stock }}</div>
				</div>
			</td>
			<td>
				<div class="ui-table-cell">{{ handleGetSpecText(item.sku_spec) }}</div>
			</td>
			<td>
				<div class="ui-table-cell">单价：<span class="ui-text-error">{{ item.real_price }}</span></div>
			</td>
			<td>
				<div class="ui-table-cell">购买数量：{{ item.buy_nums }}</div>
			</td>
		</tr>
	</table>
</template>

<script>
import ImageCell from '@/components/ImageCell/index.vue';
export default {
	name: 'goodsCell',
	components: {
		ImageCell
	},
	props: {
		goods: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},
	methods: {
		handleGetSpecText(spec) {
			if(!spec) return '';
			if(Array.isArray(spec)) {
				let texts = spec.map(item => {
					return item.name +':'+ item.value;
				})
				return texts.join(',');
			}else{
				return spec.name +':'+ spec.value;
			}
		}
	}
}
</script>

<style>
.m-order-goods-cells tr td:first-child {
	padding-left: 44px;
}
.m-order-goods-cells td {
	background-color: #f8f8f8;
}
</style>